<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="${global_templets_skin}/systemstyle/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${global_templets_skin}/systemstyle/style/admin.css" media="all">
    <link rel="stylesheet" href="${global_templets_skin}/systemstyle/style/content_list.css" media="all">
    <link rel="stylesheet" href="${global_templets_skin}/systemstyle/layui/layui_ext/dtree/dtree.css">
    <link rel="stylesheet" href="${global_templets_skin}/systemstyle/layui/layui_ext/dtree/font/dtreefont.css">
</head>
<body class="layui-layout-body">
<div id="LAY_app">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-side layui-side-menu">
            <div class="layui-side-scroll">
                <div style="height: 100%;overflow: auto;">
                    <ul id="iframeTree2" class="dtree" data-id="0"></ul>
                </div>
            </div>
        </div>
        <!-- 主体内容 -->
        <div class="layui-body" id="LAY_app_body">
            <div class="layui-tab auto-full-height" lay-allowclose="true" lay-filter="content-tab">
                <ul class="layui-tab-title" id="content_div_card_title">
                    <li class="layui-this">首页</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-fluid">
                            <div class="layui-row layui-col-space15">
                                <div class="layui-col-md12">
                                    <div class="layui-card">
                                        <div class="layui-card-header">内容管理</div>
                                        <div class="layui-card-body">
                                            <table class="layui-hide" id="test-table-form" lay-filter="test"></table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${global_templets_skin}/systemstyle/layui/layui.js"></script>
<script>
    layui.config({
        base: '${global_templets_skin}/systemstyle/' //静态资源所在路径
    }).extend({
        dtree: '../systemstyle/layui/layui_ext/dtree/dtree',
        index: 'lib/index' //主入口模块
    }).use(['element', 'dtree','table', 'index'], function () {
        var dtree = layui.dtree,
            table = layui.table,
            layer = layui.layer,
            $ = layui.jquery,
            element = layui.element;

        // 树代码示例，此处无需启用iframe
        dtree.render({
            elem: "#iframeTree2",
            //data: data
            width: '200',
            height: '100%',
            method: 'get',
            url: "/member/column/columnTree.do?siteid=${siteid!}",
            response: {
                nodeId: "id",  // 这里，内置表单名称为id，值为nodeId的值
                parentId: "parentId", //父节点ID
                moduleType: "moduleType",
                title: "name"  // 这里，内置表单名称为title，值为context的值
            }
        });

        // 绑定节点的单击事件
        dtree.on("node('iframeTree2')", function(obj){
            //layer.msg(JSON.stringify(obj.param));

            // 当前节点为最后一级节点时触发事件
            if (obj.param.leaf) {
                openTab(obj.param.context,obj.param.nodeId);
            }
        });

        function openTab(context,id){
            // 匹配选项卡是否存在
            var matchTo,
                tabs = $('#content_div_card_title>li');
            tabs.each(function(index){
                var li = $(this),
                    layid = li.attr('lay-id');

                if(layid ===  context){
                    matchTo = true;
                    return;
                }
            });

            // 如果未在选项卡中匹配到，则追加选项卡
            if(!matchTo){
                element.tabAdd("content-tab",{
                    id: context,
                    title: context,
                    content: "<iframe src='/member/content/list.do?id="+id+"' id='"+context+"_iframe' name='"+context+"_iframe' frameborder='0' class=\"layadmin-iframe\"></iframe>"
                });
            }

            // 定位当前tabs
            element.tabChange("content-tab", context);
        }

        table.render({
            elem: '#test-table-form'
            , url: '/member/content/listData.do'
            ,where: {id: "${id}",siteId:"${siteid}"} //如果无需传递额外参数，可不加该参数
            ,method: 'get' //如果无需自定义HTTP类型，可不加该参数
            ,toolbar: '#toolbarDemo'
            , cellMinWidth: 80
            , cols: [[
                {type: 'numbers'}
                , {type: 'checkbox'}
                , {field: 'id', title: 'ID', width: 100, unresize: true, sort: true}
                , {field: 'title', title: '标题'}
                , {field: 'addTime', title: '发布时间', sort: true}
                , {fixed: 'right', title: '操作', align:'center', toolbar: '#user-table-setTpl'}
            ]]
            , page: true
        });
    });

</script>
</body>
</html>